iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0

之前一直都有提到 console,可以看出印出什麼東西,那我們今天來聊聊 Chrome Console,一開始我們就先打開瀏覽器按下右鍵的檢查,再看 console 的畫面:

我們在旁邊宣告 var list=[1,2,3]
再打 list 後會出現以下畫面

 (3) \[1, 2, 3\] 

 0: 1
 1: 2
 2: 3
 length: 3
 \_\_proto\_\_: Array(0

這其實就是陳列它的資訊,
左邊的 0 1 2 數字,我們再介紹陣列的時候,不是表示可以從 0 開始算嗎?其實也就是索引值,我們可以想成是 Key 和 value。
比較特別的是,photo 旁邊不是有個三角形,我們點進去後,可以再往下看

這裡其實是指在這個陣列裡面,幫你定義了一些方法,這些東西所有的陣列都可以共享,剛我們前幾章節講道物件導向的觀念有點像,你可以想像今天有個叫 Array 的烤盤,只要印下去,它都享有這些功能。

剛剛是用 Array 來做,現在我們用上一章節提到的 function 來處理:

function Pokemo(name, skill){
 this.name = name;
 this.skill= skill;
}

當我們往下打 Pokemo 時,會出現 f

指的是 function 的意思,如果假設我弄個 new

var Pikachu = new Pokemo(`皮`,`電`);


看三角形後,我們就知道可以展開,裡面有:

1.  Pokemo {name: "皮", skill: "電"} 

  name: "皮"
  skill: "電"
  \_\_proto\_\_: Object

我們看到它的原型是 objec
之後新手菜菜子不妨可以看看 console 裡面有沒有什麼好玩的東西:)


上一篇
Day 20 物件導向程式設計 part 3
下一篇
Day 22 認識一下 ES6:宣告與變數
系列文
草頭黃小姐的 30 天 JavaScript 自學小本本30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言